<script setup>
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, getCurrentInstance } from 'vue'
	import { getAddressList } from '@/api/user'
	const instance = getCurrentInstance().proxy
	
	const type = ref('view')
	const selectId = ref(0)
	const list = ref([])
	
	function getData() {
		getAddressList().then(res => {
			let result = res.result || []
			list.value = result
		})
	}
	function addAddress(){
		let url = '/pages/user/addressAdd'
		uni.navigateTo({url})
	}
	function editAddress(id){
		let url = '/pages/user/addressAdd?id=' + id
		uni.navigateTo({url})
	}
	function selectAddress(item) {
		if(type.value === 'select') {
			selectId.value = item.addrId
			setTimeout(() => {
				uni.navigateBack({
					success: () => {
						const eventChannel = instance.getOpenerEventChannel()
						eventChannel.emit('selectAddress', uni.$uv.deepClone(item))
					}
				})
			}, 200)
		}
	}
	 
	onLoad((option) => {
		type.value = option.type || 'view'
		if(option.id) {
			selectId.value = Number(option.id || 0)
		}
	})
	onShow(() => {
		getData()
	})
</script>

<template>
	<view class="app-container">
		<view class="app-content" v-if="list.length">
			<view :class="['list-box', selectId == item.addrId? 'active' : '']" v-for="item in list" :key="item.addrId">
				<view class="box-left" @click="selectAddress(item)">
					<view class="city">{{item.orgName || '--'}}</view>
					<view class="detail">{{item.addr || '--'}}</view>
					<view class="user">
						<text>{{item.contactPerson || '--'}}</text>
						<text>{{item.contactPhone || '--'}}</text>
						<text class="tag" v-if="item.defaultAddress">默认</text>
					</view>
				</view>
				<view class="box-right" @click="editAddress(item.addrId)">
					<uv-icon name="edit-pen" :color="selectId == item.addrId? '#FFFFFF' : '#54504D'" size="50" />
				</view>
			</view>
		</view>
		<view class="empty-box" v-else>
			<empty text="没有找到您的地址"></empty>
		</view>
		<view class="app-bottom" @click="addAddress">
			<uv-icon name="plus-circle" color="#FD1024" size="40"></uv-icon>
			<text>新增收货地址</text>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-bottom: 120rpx;
		.app-content{
			margin: 24rpx;
			display: flex;
			flex-direction: column;
			gap: 16rpx;
			.list-box{
				padding: 24rpx;
				border-radius: 24rpx;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				gap: 16rpx;
				.box-left{
					flex: 1;
					display: flex;
					flex-direction: column;
					gap: 8rpx;
					.city{
						color: #808080;
						font-size: var(--theme-sm);
						line-height: var(--theme-sm-line);
					}
					.detail{
						font-weight: 600;
						font-size: var(--theme-lg);
						line-height: var(--theme-lg-line);
					}
					.user{
						display: flex;
						align-items: center;
						gap: 16rpx;
						.tag{
							padding: 6rpx 16rpx;
							font-weight: 600;
							background-color: #FFF4F2;
							color: #FD1024;
							border-radius: 8rpx;
						}
					}
				}
				.box-right{
					flex-shrink: 0;
				}
				&.active{
					background-color: #FD1024;
					color: #FFFFFF;
					.city{
						color: #FFFFFF;
					}
				}
			}
		}
		.empty-box{
			padding-top: 38rpx;
		}
		.app-bottom{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0rpx;
			height: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 16rpx;
			background-color: #FFFFFF;
		}
	}
</style>